<template>
<view class="container">
  <!--头部信息  -->
  <view class="servant_header" :style="'background:' + setting.platformSetting.defaultColor">
    <view class="servant_base_info">
      <view class="servant_base_info_left">
        <image :src="servantInfo.icon" class="servant_head_icon"></image>
        <view class="servant_base_info_left_block">
          <view class="servant_base_info_left_block_top">
            <text class="servant_name">{{servantInfo.name}}</text>
            <text class="servant_type">福州大学</text>
          </view>
          <text class="servant_community">大学生自愿者</text>
        </view>
      </view>
      <view class="servant_base_info_right" data-link="chat_user_list.html" @click.stop="tolinkUrl">
        <text class="my_msg">我的消息</text>
      </view>
    </view>
    <!-- 志愿者证 -->
    <view class="my_paper_block">
      <!-- <view class='my_paper_title'>
        <text class='my_paper_title_text'>志愿卡</text>
        <view class='more_paper'>
          <text>更多任务>></text>
        </view>
      </view> -->
      <view class="my_paper_list" :style="'background-image:linear-gradient(to right,#fff,' + setting.platformSetting.secondColor + ');color:' + setting.platformSetting.defaultColor">
        <view class="my_paper_item">
          <view class="my_paper_item_left">
            <image src="https://image1.sansancloud.com/xianhua/2019_9/26/17/33/19_785.jpg?x-oss-process=style/preview_120" class="use_icon"></image>
            <text class="paper_item_name">志愿者证</text>
          </view>
          <view class="interval_line" :style="'background:' + setting.platformSetting.defaultColor"></view>
          <view class="my_paper_item_right">
            <text class="check_paper_detail" :style="'border:1rpx solid ' + setting.platformSetting.defaultColor">{{servantInfo.servantCode}}</text>
          </view>
        </view>
      </view>
      <!-- <view class='nothing_paper_list' style="height: 60px;background:{{setting.platformSetting.secondColor}};color:{{setting.platformSetting.defaultColor}}" wx:else>
        <text>暂无任务信息~</text>
      </view> -->
    </view>
  </view>
  <view class="main_content">
    <!-- 我的服务对象 -->
    <view class="volunteers_block block_item">
      <view class="block_title" :style="'border-bottom:1rpx dashed ' + setting.platformSetting.secondColor">
        <view class="block_title_center" data-link="my_volunteers_list.html?type=1" @click.stop="tolinkUrl">
          <image src="https://image1.sansancloud.com/xianhua/2019_9/18/18/22/23_868.jpg?x-oss-process=style/preview_120" class="title_icon"></image>
          <text class="title_text" :style="'color:' + setting.platformSetting.defaultColor">我的服务对象</text>
        </view>
        <view class="block_title_right">
          <text class="more_text" :style="'color:' + setting.platformSetting.defaultColor">服务记录>></text>
        </view>
      </view>
      <scroll-view class="volunteers_list" scroll-x v-if="servantRelates.length!=0">
        <view class="volunteers_item" v-for="(item, index) in servantRelates" :key="index">
          <view class="volunteers_icon_block">
            <image :src="item.servantTargetBean.icon" class="volunteers_icon"></image>
          </view>
          <text class="volunteers_name">{{item.servantTargetBean.name}}</text>
        </view>
        <view class="more_volunteers_item" data-link="my_volunteers_list.html?type=1" @click.stop="tolinkUrl">
          <view class="volunteers_icon_block">
            <image src="https://image1.sansancloud.com/xianhua/2019_5/14/17/25/27_134.jpg?x-oss-process=style/preview_120" class="more_volunteers_icon"></image>
          </view>
        </view>
      </scroll-view>
      <view class="nothing_volunteers_list" v-else>
        <text>暂无志愿者~</text>
      </view>
    </view>
    <!-- 我的服务记录 -->
    <view class="leave_message_block block_item">
      <view class="block_title" :style="'border-bottom:1rpx dashed ' + setting.platformSetting.secondColor">
        <view class="block_title_center">
          <image src="https://image1.sansancloud.com/xianhua/2019_9/18/18/22/24_121.jpg?x-oss-process=style/preview_120" class="title_icon"></image>
          <text class="title_text" :style="'color:' + setting.platformSetting.defaultColor">我的服务记录</text>
        </view>
        <view class="block_title_right">
          <text class="more_text" :style="'color:' + setting.platformSetting.defaultColor">>></text>
        </view>
      </view>
      <scroll-view class="leave_message_list" scroll-y style="height: 100px">
        <view class="leave_message_item" v-for="(item, index) in 4" :key="index">
          <image src="https://image1.sansancloud.com/xianhua/2019_9/18/16/24/36_150.jpg?x-oss-process=style/preview_120" class="leave_message_icon"></image>
          <text class="leave_message_name">社区义诊</text>
          <text class="leave_message_time">2019.9.14 17:00</text>
        </view>
      </scroll-view>
    </view>
    <!-- 活动板块 -->
    <view class="near_activity_block block_item">
      <view class="block_title" :style="'border-bottom:1rpx dashed ' + setting.platformSetting.secondColor">
        <view class="block_title_center">
          <image src="https://image1.sansancloud.com/xianhua/2019_9/18/18/22/23_865.jpg?x-oss-process=style/preview_120" class="title_icon"></image>
          <text class="title_text" :style="'color:' + setting.platformSetting.defaultColor">活动报名</text>
        </view>
        <view class="block_title_right">
          <text class="more_text" :style="'color:' + setting.platformSetting.defaultColor">>></text>
        </view>
      </view>
      <scroll-view class="near_activity_list" scroll-x>
        <view class="near_activity_item" v-for="(item, index) in 4" :key="index">
          <image mode="aspectFill" src="https://image1.sansancloud.com/xianhua/2019_9/18/17/51/25_689.jpg" class="near_activity_banner"></image>
          <view class="mask"></view>
          <view class="near_activity_content">
            <text class="near_activity_title">公益体检在社区中心举办</text>
            <text class="near_activity_time">2019.05.12 12:00</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 我的服务类型 -->
    <view class="my_files_block block_item">
      <view class="block_title" :style="'border-bottom:1rpx dashed ' + setting.platformSetting.secondColor">
        <view class="block_title_center">
          <image src="https://image1.sansancloud.com/xianhua/2019_9/18/18/22/23_852.jpg?x-oss-process=style/preview_120" class="title_icon"></image>
          <text class="title_text" :style="'color:' + setting.platformSetting.defaultColor">我的服务类型</text>
        </view>
      </view>
      <view class="my_files__list">
        <view class="my_files_item" v-for="(item, index) in servantTypes" :key="index">
          <view class="my_file_icon_block">
            <image mode="widthFix" :src="item.servantIcon" class="my_file_icon"></image>
          </view>
          <text class="my_files_name">{{item.name}}</text>
        </view>
        <view class="add_my_files">
          <view class="add_my_files_block" @click.stop="ckeckServantTypeList" data-link="servant_type_list.html">
            <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_9/19/10/44/3_452.jpg?x-oss-process=style/preview_120" class="my_file_icon"></image>
          </view>
          <text class="my_files_name">添加</text>
        </view>
      </view>
    </view>
    <!-- 留言板块 -->
    <view class="leave_message_block block_item">
      <view class="block_title" :style="'border-bottom:1rpx dashed ' + setting.platformSetting.secondColor">
        <view class="block_title_center">
          <image src="https://image1.sansancloud.com/xianhua/2019_9/18/18/22/24_121.jpg?x-oss-process=style/preview_120" class="title_icon"></image>
          <text class="title_text" :style="'color:' + setting.platformSetting.defaultColor">留言</text>
        </view>
        <view class="block_title_right">
          <text class="more_text" :style="'color:' + setting.platformSetting.defaultColor">>></text>
        </view>
      </view>
      <scroll-view class="leave_message_list" scroll-y style="height: 100px">
        <view class="leave_message_item" v-for="(item, index) in 4" :key="index">
          <image src="https://image1.sansancloud.com/xianhua/2019_9/18/16/24/36_150.jpg?x-oss-process=style/preview_120" class="leave_message_icon"></image>
          <text class="leave_message_name">平常多注意 多吃水果</text>
          <text class="leave_message_time">2019.9.14 17:00</text>
        </view>
      </scroll-view>
    </view>
  </view>
</view>
</template>

<script>

export default {
  data() {
    return {
      setting: {},
      loginUser: null,
      servantInfo: {},
      servantTypes: {},
      servantTasks: {},
      servantRelates: [],
      applyMendianType: false,
      properties: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    console.log('======app.loginUser======', getApp().globalData.loginUser);
    console.log('====== app.setting======', getApp().globalData.setting);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let that = this;

    if (getApp().globalData.loginUser) {
      this.checkState();
    } else {
      getApp().globalData.addLoginListener(this);
      getApp().globalData.showToastLoading('loading', true);
      console.log("====setTimeout1=====");
      that.setTimeoutLogin(that.conut);
    }

    this.setData({
      setting: getApp().globalData.setting,
      loginUser: getApp().globalData.loginUser,
      properties: getApp().globalData.properties
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  // onPullDownRefresh: function () {
  //     this.onLoad()
  //     setTimeout(function () {
  //         wx.stopPullDownRefresh()
  //     }, 2000)
  // },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {}
  /**
   * 用户点击右上角分享
   */
  ,
  methods: {
    /* 组件事件集合 */
    tolinkUrl: function (e) {
      let linkUrl = e.currentTarget ? e.currentTarget.dataset.link : e;
      getApp().globalData.linkEvent(linkUrl);
    },
    ckeckServantTypeList: function (event) {
      console.log("====ckeckServantTypeList===", event);
      let link = event.currentTarget.dataset.link;
      this.tolinkUrl(link);
    },
    getServantInfo: function () {
      console.log('-------服务对象信息-------');
      let params = {};
      var customIndex = getApp().globalData.AddClientUrl("/super_shop_manager_get_manager_servant_info.html", params, 'post');
      var that = this;
      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        data: customIndex.params,
        header: getApp().globalData.headerPost,
        method: 'POST',
        success: function (res) {
          console.log(res.data);

          if (res.data.errcode == '0') {
            let servantInfo = res.data.relateObj;
            that.setData({
              servantInfo: servantInfo
            });
            that.getServantTypes(servantInfo.id);
            that.setNav(servantInfo);
          } else {
            wx.showModal({
              title: '失败了',
              content: res.data.errMsg
            });
          }

          wx.hideLoading();
        },
        fail: function (res) {
          wx.showModal({
            title: '失败了',
            content: '请求失败了，请下拉刷新！'
          });
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },
    getServantTypes: function (servantId) {
      console.log('-------服务对象分类(资料库)-------');
      let params = {
        servantId: servantId
      };
      var customIndex = getApp().globalData.AddClientUrl("/find_servant_types.html", params, 'post');
      var that = this;
      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        data: customIndex.params,
        header: getApp().globalData.headerPost,
        method: 'POST',
        success: function (res) {
          console.log(res.data);

          if (res.data.errcode == '0') {
            let servantTypes = res.data.relateObj.result;
            that.setData({
              servantTypes: servantTypes
            });
          } else {
            wx.showModal({
              title: '失败了',
              content: res.data.errMsg
            });
          }

          wx.hideLoading();
        },
        fail: function (res) {
          wx.showModal({
            title: '失败了',
            content: '请求失败了，请下拉刷新！'
          });
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },
    getServantTasks: function () {
      console.log('-------查找服务对象的表单任务-------');
      let params = {};
      var customIndex = getApp().globalData.AddClientUrl("/wx_find_servant_target_custom_form_tasks.html", params, 'post');
      var that = this;
      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        data: customIndex.params,
        header: getApp().globalData.headerPost,
        method: 'POST',
        success: function (res) {
          console.log(res.data);

          if (res.data.errcode == '0') {
            let servantTasks = res.data.relateObj;
            that.setData({
              servantTasks: servantTasks
            });
          } else {
            wx.showModal({
              title: '失败了',
              content: res.data.errMsg
            });
          }

          wx.hideLoading();
        },
        fail: function (res) {
          wx.showModal({
            title: '失败了',
            content: '请求失败了，请下拉刷新！'
          });
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },
    getServantRelates: function () {
      console.log('-------服务对象关系-------');
      let that = this;
      let params = {
        type: 3
      };
      let customIndex = getApp().globalData.AddClientUrl("/servant_my_servant_targets.html", params, 'post');
      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        data: customIndex.params,
        header: getApp().globalData.headerPost,
        method: 'POST',
        success: function (res) {
          console.log(res.data);

          if (res.data.errcode == '0') {
            let servantRelates = res.data.relateObj.result;
            that.setData({
              servantRelates: servantRelates
            });
          } else {
            wx.showModal({
              title: '失败了',
              content: res.data.errMsg
            });
          }

          wx.hideLoading();
        },
        fail: function (res) {
          wx.showModal({
            title: '失败了',
            content: '请求失败了，请下拉刷新！'
          });
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },
    setNavColor: function () {
      console.log('setNavColor', getApp().globalData.setting);
      wx.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: getApp().globalData.setting.platformSetting.defaultColor
      });
    },
    setNav: function (servantInfo) {
      console.log('setNav', getApp().globalData.setting);
      wx.setNavigationBarTitle({
        title: servantInfo.name
      });
    },
    loginSuccess: function (user) {
      console.log("pre apply mendian login success call back!", user);
      this.checkState();
    },
    loginFailed: function (err) {
      console.log("login failed!!");
    },
    checkState: function () {
      console.log('======checkState.loginUser======', getApp().globalData.loginUser);
      this.setData({
        setting: getApp().globalData.setting,
        loginUser: getApp().globalData.loginUser
      });
      this.setNavColor();
      this.getServantInfo();
      this.getServantRelates();

      if (!getApp().globalData.loginUser.platformUser.managerMendianId) {
        console.log("=========没有管理店铺=========");
        this.setData({
          applyMendianType: false
        });
        return;
      } else {}
    },
    setTimeoutLogin: function (conuData) {
      let that = this;
      console.log("====setTimeout-init=====", conuData);
      that.conut = conuData;
      that.conut += 2;

      if (that.conut <= 5) {
        setTimeout(function () {
          if (getApp().globalData.loginUser) {
            wx.hideLoading();
          } else {
            that.setTimeoutLogin(that.conut);
          }
        }, that.conut * 1000);
      } else {
        wx.showModal({
          title: '失败了',
          content: '请求失败了，请下拉刷新！'
        });
      }
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>